<script lang="ts" setup>
import { convertLevel } from '@/utils'

const { videoInfo, videoChapterList } = storeToRefs(useVideo())
const { toPlayer } = useVideo()
</script>

<template>
  <view h-260 pt w-full bg="#f6f6f6" between box-border>
    <view w-254 ml relative flex-shrink-0>
      <image :src="videoInfo?.cover_img" w-full h-180 rounded />
      <view class="top-43 left-50 z-1 w-150 h-100 absolute center flex-col" @click="toPlayer(videoChapterList[0].episodeList[0])">
        <view w-full h-full bg=" #333333" opacity-90 absolute rounded z--1 />
        <image src="@/static/images/icons/video/detail/play.png" w-48 h-48 />
        <text text="20 white">
          点击试看
        </text>
      </view>
    </view>
    <view mx-2>
      <text text="26 #333333">
        {{ videoInfo?.title }}
      </text>
      <view class="second" my-1>
        <text>级别：{{ convertLevel(videoInfo?.course_level) }}</text>
        <image v-for="i in 5" :key="i" src="@/static/images/icons/common/fire.png" mode="scaleToFill" />
      </view>
      <view class="user-price">
        <view class="user">
          <image src="@/static/images/icons/common/user.png" mode="scaleToFill" />
          <text>{{ videoInfo?.uv }}</text>
        </view>
        <view class="price">
          <view>
            <text class="dollor">
              ¥
            </text>
            <text class="price">
              {{ videoInfo?.amount }}
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.second {
  display: flex;
  align-items: center;

  text {
    color: #7f7f7f;
    font-size: 24rpx;
    margin-right: 10rpx;
  }

  image {
    width: 27rpx;
    height: 27rpx;
    margin-right: 5rpx;
  }
}

.user-price {
  display: flex;
  justify-content: space-between;

  .user {
    display: flex;
    align-items: center;

    image {
      width: 32rpx;
      height: 32rpx;
    }

    text {
      font-size: 28rpx;
      color: #7f7f7f;
      margin-left: 5rpx;
    }
  }

  .price {
    display: flex;
    align-items: baseline;

    .dollor {
      font-size: 24rpx;
    }

    &>view {
      display: flex;
      align-items: baseline;
      margin-left: 20rpx;

      &:last-child {
        color: #e51b11;
        font-size: 40rpx;
      }
    }
  }
}
</style>
